<!--
 * @Descripttion:每日销售报表右边卡片组件
 * @Author: 森哥
 * @Date: 2022-11-07 15:46:21
 * @LastEditors: xiaodi 53527718@qq.com
 * @LastEditTime: 2025-10-09 23:33:31
-->
<template>
  <div>
    <div class="saleSummary-card-box">
      <!-- 骨架屏 -->
      <div v-if="loading" class="skeleton-container">
        <!-- 标题骨架 -->
        <div class="skeleton-title"></div>
        <div class="skeleton-description"></div>

        <!-- 基本信息骨架 -->
        <div class="skeleton-info">
          <div class="skeleton-info-item"></div>
          <div class="skeleton-info-item"></div>
        </div>

        <!-- 收银汇总骨架 -->
        <div class="skeleton-section">
          <div class="skeleton-section-title"></div>
          <div class="skeleton-table-header">
            <div class="skeleton-cell"></div>
            <div class="skeleton-cell"></div>
            <div class="skeleton-cell"></div>
          </div>
          <div class="skeleton-line"></div>
          <div v-for="i in 3" :key="i" class="skeleton-table-row">
            <div class="skeleton-cell"></div>
            <div class="skeleton-cell"></div>
            <div class="skeleton-cell"></div>
          </div>
          <div class="skeleton-line"></div>
          <div class="skeleton-summary-row">
            <div class="skeleton-cell"></div>
            <div class="skeleton-cell"></div>
            <div class="skeleton-cell"></div>
          </div>
        </div>

        <!-- 汇总骨架 -->
        <div class="skeleton-section">
          <div class="skeleton-section-title"></div>
          <div v-for="i in 4" :key="i" class="skeleton-info-item"></div>
          <div class="skeleton-line"></div>
        </div>

        <!-- 优惠统计骨架 -->
        <div class="skeleton-section">
          <div class="skeleton-section-title"></div>
          <div class="skeleton-table-header">
            <div class="skeleton-cell"></div>
            <div class="skeleton-cell"></div>
          </div>
          <div class="skeleton-line"></div>
          <div v-for="i in 2" :key="i" class="skeleton-table-row">
            <div class="skeleton-cell"></div>
            <div class="skeleton-cell"></div>
          </div>
          <div class="skeleton-line"></div>
        </div>

        <!-- 退菜明细骨架 -->
        <div class="skeleton-section">
          <div class="skeleton-section-title"></div>
          <div class="skeleton-table-header">
            <div class="skeleton-cell"></div>
            <div class="skeleton-cell"></div>
            <div class="skeleton-cell"></div>
          </div>
          <div class="skeleton-line"></div>
          <div v-for="i in 2" :key="i" class="skeleton-table-row">
            <div class="skeleton-cell"></div>
            <div class="skeleton-cell"></div>
            <div class="skeleton-cell"></div>
          </div>
        </div>
      </div>

      <!-- 实际内容 -->
      <div v-else>
        <!-- 餐厅名字 -->
        <div class="title">{{ shopInfo.shop_name }}</div>
        <div class="description">【每日销售报表】</div>

        <!-- 交班单号 -->
        <div class="desc-item">
          <div>餐段：{{ detailData.timeSlot }}</div>
          <span></span>
        </div>

        <!-- 营业日期 -->
        <div class="desc-item">
          <div>日期：{{ detailData.start_time }} - {{ detailData.end_time }}</div>
          <span></span>
        </div>

        <!-- 收银汇总 -->
        <div class="description" style="margin-top: 20px">收银汇总</div>
        <div class="desc-item">
          <div class="desc-left-box">付款方式</div>
          <span class="desc-center-box">笔数</span>
          <div class="desc-right-box">合计收入</div>
        </div>
        <div class="desc-line"></div>

        <!-- 收银汇总循环列表 -->
        <div v-for="(item, i) in payMethodsList" :key="i" class="list-box">
          <div class="list-item">
            <div class="left-box">{{ item.client }}</div>
            <span class="center-box">{{ item.num }}</span>
            <div class="right-box">{{ item.money }}</div>
          </div>
          <div class="list-line"></div>
        </div>

        <!-- 收银合计 -->
        <div class="desc-item">
          <div class="desc-left-box">收银合计：</div>
          <span class="desc-center-box">{{ totalCount(payMethodsList) }}</span>
          <div class="desc-right-box">{{ totalMoney(payMethodsList) }}</div>
        </div>

        <!-- 汇总 -->
        <div class="description">汇总</div>
        <!-- 帐单数&&单均消费&&消费人数&&人均消费 -->
        <div class="desc-item">
          <div>账单数</div>
          <div>{{ summary.bill_count }}</div>
        </div>
        <div class="desc-item">
          <div>单均消费</div>
          <div>{{ summary.avg_bill_amount }}</div>
        </div>
        <div class="desc-item">
          <div>消费人数</div>
          <div>{{ summary.customer_count }}</div>
        </div>
        <div class="desc-item">
          <div>人均消费</div>
          <div>{{ summary.avg_customer_amount }}</div>
        </div>
        <div class="desc-line"></div>

        <!-- 优惠统计 -->
        <div class="description">优惠统计</div>
        <!-- 优惠方式&&打折&&优惠合计 -->
        <div class="desc-item">
          <div>优惠方式</div>
          <div>合计金额</div>
        </div>
        <div class="desc-line"></div>
        <div class="desc-item" v-for="(item, index) in discountSummary" :key="`asd${index}`">
          <div>{{ item.name }}</div>
          <div>{{ item.money }}</div>
        </div>
        <div class="desc-line"></div>

        <!-- 退菜明细(退菜明细列表返回数据为空数组时不展示) -->
        <div class="description" v-if="returnFoodList.length > 0">退菜明细</div>
        <!-- 菜品名称&&数量&&金额  -->
        <div class="desc-item" v-if="returnFoodList.length > 0">
          <div class="desc-left-box">{{ !isCategoryStatistics ? '菜品名称' : '分类名称' }}</div>
          <div class="desc-center-box">数量</div>
          <div class="desc-right-box">金额</div>
        </div>
        <div class="desc-line" v-if="returnFoodList.length > 0"></div>
        <div v-for="(item, index) in returnFoodList" :key="`t${index}`" class="list-box">
          <div class="list-item">
            <div class="left-box">{{ item.name }}</div>
            <span class="center-box">{{ item.num }}</span>
            <div class="right-box">{{ item.money }}</div>
          </div>
          <div class="list-line"></div>
        </div>

        <!-- 餐厅地址 -->
        <div class="address-phone-box">
          <div>餐厅地址：{{ shopInfo.address }}</div>
          <div>餐厅电话：{{ shopInfo.phone }}</div>
          <div>技术支持：贵州一粒米科技餐饮软件服务有限公司</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { mathAdd, strNumberToFixed } from '@/utils/mathjsTool'

// 定义props
const props = defineProps({
  isCategoryStatistics: {
    type: Boolean,
    default: true
  },
  // 付款方式列表(接口获取)
  payMethodsList: {
    type: Array,
    default: () => []
  },
  // 退菜明细列表(接口获取)
  returnFoodList: {
    type: Array,
    default: () => []
  },
  summary: {
    type: Object,
    default: () => {
      return {
        bill_count: '', //账单数
        avg_bill_amount: '', //单均消费
        customer_count: '', //消费人数
        avg_customer_amount: '' //人均消费
      }
    }
  },
  detailData: {
    type: Object,
    default: {}
  },
  discountSummary: {
    type: Array,
    default: () => []
  },
  shopInfo: {
    type: Object,
    default: {}
  },
  loading: {
    type: Boolean,
    default: false
  }
})

// 收银汇总总付款笔数
const totalCount = arr => {
  let count = 0
  arr.map(v => (count += Number(v.num)))
  return count
}

// 收银汇总合计收入
const totalMoney = arr => {
  let count = 0
  arr.forEach(v => {
    const money = Number(v.money) || 0
    count = mathAdd(count, money)
  })
  return strNumberToFixed(count, 2)
}
</script>

<style lang="scss" scoped>
//滚动条整体的大小
.saleSummary-card-box::-webkit-scrollbar {
  width: 6px !important;
  height: 0 !important;
}
//滚动条里滑动的滑块
.saleSummary-card-box::-webkit-scrollbar-thumb {
  height: 200px !important;
  background: #d2d2d2 !important;
  border-radius: 3px !important;
}
//滚动条底层样式
.saleSummary-card-box::-webkit-scrollbar-track {
  display: none !important;
}
.saleSummary-card-box {
  width: 420px;
  height: 986px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  padding: 30px;
  overflow-y: auto;
  .title {
    font-size: 20px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
  }
  .description {
    font-size: 16px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
    margin: 20px 0;
  }
  .list-box {
    display: flex;
    flex-direction: column;
    .list-item {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      margin-top: 10px;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Bold;
      font-weight: 700;
      color: #333333;
      // text-align: center;
      width: 100%;
      box-sizing: border-box;
      .left-box {
        width: 33%;
        display: flex;
        justify-content: flex-start;
      }
      .center-box {
        width: 33%;
        display: flex;
        justify-content: center;
      }
      .right-box {
        width: 33%;
        display: flex;
        justify-content: flex-end;
      }
    }
    .list-line {
      width: 360px;
      height: 1px;
      background: #e2e2e2;
      margin-top: 10px;
    }
  }
  .desc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    color: #333333;
    text-align: center;
    .desc-left-box {
      width: 33%;
      display: flex;
      justify-content: flex-start;
    }
    .desc-center-box {
      width: 33%;
      display: flex;
      justify-content: center;
    }
    .desc-right-box {
      width: 33%;
      display: flex;
      justify-content: flex-end;
    }
  }
  .desc-line {
    width: 360px;
    height: 1px;
    background: #e2e2e2;
    margin-top: 10px;
  }
  .desc-title {
    font-size: 16px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
    margin: 20px 0 10px 0;
  }
  .address-phone-box {
    margin-top: 50px;
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #333333;
    line-height: 24px;
    > div {
      margin-bottom: 10px;
    }
  }
}

// 骨架屏样式
.skeleton-container {
  .skeleton-title {
    height: 24px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 10px;
    width: 60%;
    margin: 0 auto 10px;
  }

  .skeleton-description {
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 20px;
    width: 40%;
    margin: 0 auto 20px;
  }

  .skeleton-info {
    margin-bottom: 20px;

    .skeleton-info-item {
      height: 18px;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: skeleton-loading 1.5s infinite;
      border-radius: 4px;
      margin-bottom: 10px;
      width: 80%;
    }
  }

  .skeleton-section {
    margin-bottom: 30px;

    .skeleton-section-title {
      height: 20px;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: skeleton-loading 1.5s infinite;
      border-radius: 4px;
      margin-bottom: 15px;
      width: 30%;
      text-align: center;
      margin: 0 auto 15px;
    }

    .skeleton-table-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .skeleton-cell {
        height: 16px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        border-radius: 4px;
        width: 30%;
      }
    }

    .skeleton-table-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

      .skeleton-cell {
        height: 14px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        border-radius: 4px;
        width: 30%;
      }
    }

    .skeleton-summary-row {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;

      .skeleton-cell {
        height: 16px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        border-radius: 4px;
        width: 30%;
      }
    }

    .skeleton-info-item {
      height: 18px;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: skeleton-loading 1.5s infinite;
      border-radius: 4px;
      margin-bottom: 10px;
      width: 100%;
    }
  }

  .skeleton-line {
    width: 100%;
    height: 1px;
    background: #e2e2e2;
    margin: 10px 0;
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
</style>
